<template>
	<wsPage title="测试新增">
		<div slot="page_operate">
			<Button type="ghost" @click="goBack"><Icon type="ios-arrow-back"></Icon><span>返回</span></Button>
		</div>
		<baidu-map class="bm-view" ak="HyWDZdbTWuZnY9dmbVbSCtpzN2j7LzPd" center="深圳">
			<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
		</baidu-map>
		<div>
			<img v-img="{title: '产品图片1', group:'a'}" class="demo-img" src="../../assets/images/login/login_bg.jpg"/>
			<img v-img="{title: '产品图片2', group:'a'}" class="demo-img" src="../../assets/images/login/login_bg.jpg"/>
		</div>
		<div class="echarts">
    		<button @click="doRandom">Random</button>
  		</div>
	</wsPage>
</template>

<script>
	import {BaiduMap, BmGeolocation} from 'vue-baidu-map';
    export default {
    	components: {
    		BaiduMap,
    		BmGeolocation
  		},
    	data() {
    		return {
    			loading: true,
    			bar: {
			        title: {
			          text: 'ECharts Hello World'
			        },
			        tooltip: {},
			        xAxis: {
			          data: ['Shirt', 'Sweater', 'Chiffon Shirt', 'Pants', 'High Heels', 'Socks']
			        },
			        yAxis: {},
			        series: [{
			          name: 'Sales',
			          type: 'bar',
			          data: [5, 20, 36, 10, 10, 20]
			        }]
			    }
    		}
    	},
    	methods: {
    		goBack() {
    			this.$router.push('/demo');
    		},
    		doRandom() {
		        const that = this;
		        let data = [];
		        for (let i = 0, min = 5, max = 99; i < 6; i++) {
		          data.push(Math.floor(Math.random() * (max + 1 - min) + min));
		        }
		        that.loading = !that.loading;
		        that.bar.series[0].data = data;
		    },
	      	onReady(instance) {
	        	console.log(instance);
	      	},
	      	onClick(event, instance, echarts) {
	        	console.log(arguments);
	      	}
    	}
    }
	
</script>

<style scoped>
	.bm-view {
	  width: 100%;
	  height: 300px;
	}
	.demo-img {
		width: 300px;
		height: 300px;
	}
	.echarts {
	    width: 400px;
	    height: 400px;
	  }
</style>